<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
    <link href="../static/css/vui365.min.css" rel="stylesheet">
    <title>注册</title>
</head>

<body>
    <div id="app">
        <div class="login-page" :style="'background-image: url(' + bgImgUrl + ');'">
            <div class="login-form">
                <div class="form-body" style="width:300px">
                    <h1>账号注册</h1>
                    <form action="#">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-person-fill"></i>
                                </span>
                                <input type="text" class="form-control" name="user_name" placeholder="账号" minlength="2"
                                    maxlength="16" required />
                            </div>
                        </div>
                        <div class="form-group my-1">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-envelope-fill"></i>
                                </span>
                                <input type="text" class="form-control" name="email" placeholder="电子邮件" minlength="2"
                                    maxlength="16" required />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-phone-fill"></i>
                                </span>
                                <input type="text" class="form-control" name="mobile" placeholder="手机号码" minlength="2"
                                    maxlength="16" required />
                            </div>
                        </div>
                        <div class="form-group my-1">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-key-fill"></i>
                                </span>
                                <input type="password" class="form-control" name="password" placeholder="密码"
                                    minlength="3" maxlength="16" required />
                            </div>
                        </div>
                        <div class="form-group my-1">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-key-fill"></i>
                                </span>
                                <input type="password" class="form-control" name="repassword" placeholder="确认密码"
                                    minlength="3" maxlength="16" required />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-image-alt"> </i>
                                </span>
                                <input type="text" class="form-control" name="captcha" placeholder="验证码" maxlength="4"
                                    required />
                                <div class="input-group-text p-0" title="点击刷新验证码">
                                    <canvas id="captcha"></canvas>
                                    <!-- <img src="/index.php/admin/captcha" alt="验证码" class="img-captcha rounded-right border-left-0" /> -->
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-check my-1">
                            <input type="checkbox" class="form-check-input" id="chkRemember" />
                            <span>我同意 <a href="###" target="_blank">注册协议</a></span>
                        </div>
                        <div>
                            <cd-button class="btn btn-primary me-2" @click="onLogin()">立即注册</cd-button>
                            <button type="reset" class="btn btn-secondary">重置</button>
                            <span class="ms-2 align-bottom">
                                <a href="login.html">登录已有账号</a>
                            </span>
                        </div>
                    </form>
                </div>
                <div class="text-center mt-2 text-muted" style="font-size: 12px">
                    请使用基于谷歌内核的现代浏览器打开，不要使用IE模式。
                </div>
            </div>
        </div>
    </div>
    <script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../static/vendor/vue/vue.global.prod.min.js"></script>
    <script src="../static/vendor/axios/axios.min.js"></script>
    <script src="../static/js/vui365.min.js"></script>
    <script>
        // 全局配置
        myAxios = vui365.getMyAxios();

        // API接口配置
        const UrlCfg = {
            regist: '/api/admin/regist',
        }

        // 应用配置
        const App = {
            data() {
                return {
                    bgImgUrl: "",
                };
            },
            methods: {
                /**
                 * 初始化页面数据
                 */
                initData() {
                    window.localStorage.removeItem("historyMenu");
                },
                /**
                 * 初始化页面视图
                 */
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                    // 创建图像验证码
                    new vui365.H5ImageCaptcha(document.querySelector("#captcha"), {
                        width: 150,
                        height: 38,
                    });
                    // 设置背景图片
                    this.bgImgUrl = "../static/images/loginbg/" + vui365.EsUtils.random(1, 23) + ".jpg";
                },
                /**
                 * 登录事件处理
                 */
                async onLogin() {
                    let elForm = document.querySelector("form");
                    // 表单原生校验方法
                    if (!elForm.checkValidity()) {
                        elForm.reportValidity();
                        return;
                    }
                    console.log("提交表单数据1");
                    // 验证码校验
                    let captcha = document.querySelector('input[name="captcha"]').value;
                    let captchaStatus = vui365.H5ImageCaptcha.getInstance(document.querySelector("#captcha")).check(captcha);
                    if (!captchaStatus) {
                        vui365.BsDialog.toast("验证码错误");
                        return;
                    }
                    console.log("提交表单数据2");
                    // 获取表单数据
                    let formData = new FormData(elForm);
                    if (formData.length == 0) {
                        vui365.BsDialog.alert('表单无效');
                        return;
                    }
                    console.log("提交表单数据3");
                    let data = {}
                    formData.forEach((v, k) => {
                        data[k] = v;
                    });
                    console.log("提交表单数据");
                    // 提交表单数据
                    let msgInfo = await vui365.stdAxios(UrlCfg.regist, data);
                    console.log(msgInfo);
                    if (msgInfo.status == 0) {
            vui365.BsDialog.toast(vui365.EsConfig.parseValidateMessageOfLaravel(msgInfo.message));
                        // vui365.BsDialog.toast(msgInfo.message);
                        return;
                    }
                    // 保存token信息
                    vui365.EsConfig.setLoginInfo(msgInfo.data);
                    // 跳转到首页
                    location.href = "index.html"
                },
            },
            created() {
                this.initData();
            },
            mounted() {
                this.initView();
            },
        }
        // 创建应用实例
        const app = Vue.createApp(App);
        //  注册组件
        app.component("CdButton", vui365.getComponentOfCdButton())
        // 加载根元素
        app.mount('#app');

    </script>
</body>

</html>